<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="utf-8">
	<title>用户列表</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="../css/font_eolqem241z66flxr.css" media="all" />
	<link rel="stylesheet" href="../css/list.css" media="all" />
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote news_search">
		<form  class="layui-form">
		<div>
			<div class="layui-inline">
			    <div class="layui-input-inline">
			    	<input type="text" id="nickname" value="" placeholder="请输入昵称" class="layui-input search_input">
			    </div>
			     <div class="layui-input-inline layui-form">
			    	<select name="sex" class="" id="sex">
						<option value="-1">请选择性别</option>
						<option value="1">男</option>
						<option value="0">女</option>
						<option value="2">保密</option>
					</select>
			    </div>
			    <div class="layui-input-inline layui-form">
			    	<select name="status" class="" id="status">
						<option value="-1">请选择账户状态</option>
				        <option value="0">未激活</option>
						<option value="1">正常</option>
						<option value="2">禁用</option>
					</select>
			    </div>
			</div>
			</div>
			<div style="margin-top: 1%">
			<div class="layui-inline">
				<input type="text" id="createTimeStart" class="layui-input userName"
					name="createTimeStart" placeholder="注册时间(开始)" value="">
			</div>		
			<div class="layui-inline">
				<input type="text" id="createTimeEnd" class="layui-input userName"
					name="createTimeEnd" placeholder="注册时间(结束)" value="">
			</div>	
			<a class="layui-btn search_btn" lay-submit="" data-type="search" lay-filter="search">查询</a>
			<div class="layui-inline">
				<a class="layui-btn layui-btn-normal userAdd_btn">添加用户</a>
			</div>
			<div class="layui-inline">
				<a class="layui-btn layui-btn-danger batchDel">批量删除</a>
			</div>
			<div class="layui-inline">
				（支持模糊查询）
			</div>
			</div>
	</blockquote>
	</form>
	<div class="layui-form">
	  	<table id="userList" lay-filter="userList"></table>
	</div>
	<script type="text/javascript" src="../layui/layui.js"></script>
	<script type="text/html" id="barEdit">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script type="text/html" id="sexTpl">
 		 {{#  if(d.sex === '0'){ }}
   		 <span style="color: #F581B1;">女</span>
  		{{#  } else if(d.sex === '1'){ }}
   		 	男
		{{#  } else{ }}
   		 	保密
  		{{#  } }}
	</script>
	<script type="text/html" id="statusTpl">
 		 {{#  if(d.status === '0'){ }}
   		 <span style="color: #FFB800;">未激活</span>
  		{{#  } else if(d.status === '1'){ }}
			<span style="color: #01AAED;">正常</span>
		{{#  } else{ }}
   		 	<span style="color: #FF5722;">禁用</span>
  		{{#  } }}
	</script>
	</script>
	<script>
	layui.config({
		base : "js/"
	}).use(['form','layer','jquery','table','laydate'],function(){
		var form = layui.form,table = layui.table,
			layer = parent.layer === undefined ? layui.layer : parent.layer,laydate = layui.laydate
			$ = layui.jquery,
			nowTime = new Date().valueOf(),max = null, active = {
				search: function(){
			        var nickname = $('#nickname'),sex=$('#sex option:selected'),status=$('#status option:selected');
			        createTimeStart=$("#createTimeStart"),createTimeEnd=$("#createTimeEnd");
			        //执行重载
			        table.reload('userList', {
			          page: {
			            curr: 1 //重新从第 1 页开始
			          }
			          ,where: {
			            //key: {
			              nickname: nickname.val(),
			              sex:sex.val(),
			              status:status.val(),
			              createTimeStart:createTimeStart.val(),
			              createTimeEnd:createTimeEnd.val()
			            //}
			          }
			        });
			      }
			    };
			    
		var start = laydate.render({
	        elem: '#createTimeStart',
	        type: 'datetime',
	        max: nowTime,
	        btns: ['clear', 'confirm'],
	        done: function(value, date){
	            endMax = end.config.max;
	            end.config.min = date;
	            end.config.min.month = date.month -1;
	        }
	    });
	    var end = laydate.render({
	        elem: '#createTimeEnd',
	        type: 'datetime',
	        max: nowTime,
	        done: function(value, date){
	            if($.trim(value) == ''){
	                var curDate = new Date();
	                date = {'date': curDate.getDate(), 'month': curDate.getMonth()+1, 'year': curDate.getFullYear()};
	            }
	            start.config.max = date;
	            start.config.max.month = date.month -1;
	        }
	    })
		
		//加载页面数据
		table.render({
			id:'userList'
		    ,elem: '#userList'
		    ,url: 'getUserList' //数据接口
		    ,limit:10//每页默认数
		    ,limits:[10,20,30,40]
		    ,cols: [[ //表头
		      {type:'checkbox'}
	          ,{field:'uid', title: 'ID',width:60}
	          ,{field:'eMail', title: '邮箱'}
	          ,{field:'nickname', title: '昵称'}
	          ,{field:'sex', title: '性别',templet: '#sexTpl'}
	          ,{field:'birthday', title: '出生日期',templet: '<div>{{ formatTime(d.birthday,"yyyy-MM-dd")}}</div>'}
	          ,{field:'address', title: '地址'}
	          ,{field:'phone', title: '手机',width:120}
	          ,{field:'status', title: '状态',templet: '#statusTpl'}
	          ,{field:'createTime', title: '注册日期',templet: '<div>{{ formatTime(d.createTime,"yyyy-MM-dd hh:mm:ss")}}</div>'}
	          ,{title: '操作',toolbar: '#barEdit'}
		    ]]
				,page: true //开启分页
		  });
		
		//监听工具条
		  table.on('tool(userList)', function(obj){
		    var data = obj.data;
		    if(obj.event === 'del'){
		      layer.confirm('真的删除行么', function(index){
		    	  $.ajax({
		    		  url:'delUserByUid?uid='+data.uid,
		    		  type : "get",
		    		  success : function(d){
		    			  if(d.code==0){
		    				  obj.del();
		    			  }else{
		    				  layer.msg(data.msg,{icon: 5});
		    			  }
		    		  }
		    	  })
		        layer.close(index);
		      });
		    } else if(obj.event === 'edit'){
		      layer.open({
		    	  type: 2,
		    	  title:"编辑用户",
		    	  area: ['400px', '500px'],
		    	  content:"user/editUser?uid="+data.uid //这里content是一个普通的String
		      })
		    }
		    
		  });

		//查询
	 	$(".search_btn").click(function(){
			var type = $(this).data('type');
		    active[type] ? active[type].call(this) : '';
		})

		//添加文章
		$(".userAdd_btn").click(function(){
			var index = layui.layer.open({
				title : "添加文章",
				type : 2,
				content : "addUser",
				success : function(layero, index){
					
				}
			})
			//改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
			$(window).resize(function(){
				layui.layer.full(index);
			})
			layui.layer.full(index);
		})

		//批量删除
		$(".batchDel").click(function(){
			var checkStatus = table.checkStatus('userList')
		      ,data = checkStatus.data,userStr='';
			if(data.length>0){
				$.each(data, function (n, value) {
					userStr+=value.uid+',';
		          });
				userStr=userStr.substring(0,userStr.length-1);
				  layer.confirm('确定删除<strong>'+data.length+'</strong>条数据吗？', function(index){
					//调用删除接口
					   $.ajax({
				    		  url:'delUsers?userStr='+userStr,//接口地址
				    		  type : "get",
				    		  success : function(d){
				    			  if(d.code==0){
				    				  //删除成功，刷新父页面
				    				  parent.location.reload();
				    			  }else{
				    				  layer.msg("权限不足，联系超管！",{icon: 5});
				    			  }
				    		  }
				    	  })
				  });
			}else{
				layer.msg("请选择需要删除的用户");
			}
		})

		
	})

	//格式化时间
	function formatTime(datetime,fmt){
		if(datetime==null||datetime==0){
			return "";
		}
		if (parseInt(datetime)==datetime) {
		    if (datetime.length==10) {
		      datetime=parseInt(datetime)*1000;
		    } else if(datetime.length==13) {
		      datetime=parseInt(datetime);
		    }
		  }
		  datetime=new Date(datetime);
		  var o = {
		  "M+" : datetime.getMonth()+1,                 //月份   
		  "d+" : datetime.getDate(),                    //日   
		  "h+" : datetime.getHours(),                   //小时   
		  "m+" : datetime.getMinutes(),                 //分   
		  "s+" : datetime.getSeconds(),                 //秒   
		  "q+" : Math.floor((datetime.getMonth()+3)/3), //季度   
		  "S"  : datetime.getMilliseconds()             //毫秒   
		  };   
		  if(/(y+)/.test(fmt))   
		  fmt=fmt.replace(RegExp.$1, (datetime.getFullYear()+"").substr(4 - RegExp.$1.length));   
		  for(var k in o)   
		  if(new RegExp("("+ k +")").test(fmt))   
		  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
		  return fmt;
	}
	</script>
</body>
</html>